<template>
	<div :class="['my-alert', `alert-${type}`]" v-show="visible">
		<div class="inner">
			<header>
				<h1>
					<slot name="header"></slot>
				</h1>
			</header>
			<div class="content">
				<p>
					<slot name="content"></slot>
				</p>
				<div>
					<YUButton @click="operateAlert(false)" :type="type">
						<slot name="btnText"></slot>
					</YUButton>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
const typeMap = [
	'primary',
	'success',
	'danger',
	'warning'
];

export default {
	name: 'YUAlert',
	data() {
		return {
			visible: false
		}
	},
	props: {
		type: {
			type: String,
			default: 'primary',
			validator(value) {
				return typeMap.includes(value)
			}
		}
	},
	methods: {
		operateAlert(isShow) {
			debugger
			if (!isShow) {
				this.$emit('confirm');
			}
			this.visible = isShow;
		}
	}
}
</script>
<style lang="scss">
.my-alert {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.6);

	.inner {
		position: absolute;
		top: 50px;
		left: 50%;
		width: 400px;
		margin-left: -200px;
		border-radius: 5px;
		background-color: #fff;
		overflow: hidden;

		h1,
		p {
			margin: 0;
			font-weight: normal;
			font-size: 16px;
		}
		header {
			height: 44px;
			padding: 0 15px;
			line-height: 44px;
			box-sizing: border-box;
		}

		.content {
			padding: 15px;
			box-sizing: border-box;
			button {
				float: right;
				margin: 15px;
			}
		}
	}

	&.alert-primary {
		header {
			background-color: #409eff;
			color: #fff;
		}
	}

	&.alert-success {
		header {
			background-color: #67c23a;
			color: #fff;
		}
	}
	&.alert-danger {
		header {
			background-color: #f56c6c;
			color: #fff;
		}
	}
	&.alert-warning {
		header {
			background-color: #e6a23c;
			color: #fff;
		}
	}
}
</style>